<template>
  <div>
    <mt-swipe style="height:230px;" :auto="4000">
      <mt-swipe-item>
        <img src="../assets/1.jpg">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/1.jpg">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/1.jpg">
      </mt-swipe-item>
    </mt-swipe>
    <mt-header fixed title="商品详情">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right">
        <router-link to="/">首页</router-link>
      </mt-button>
    </mt-header>
  <div class="detail">
    <div class="title">{{detailMsg.proName}}</div>
    <p class="price">价格：
      <span>￥{{detailMsg.price}}</span>
      <del>￥{{detailMsg.oldPrice}}</del>
    </p>
    <div class="size">
      <span>尺码：</span>
      <mt-navbar v-model="selected">
        <mt-tab-item v-for="(val,index) in size" :key="index" :id="val" class="size-count" style="font-size:40 / 16rem">{{val}}</mt-tab-item>
      </mt-navbar>
    </div>
    <div class="num">
      <p>数量：<span @click="delnum">-</span><span>{{buyNum}}</span><span @click="addnum">+</span>&nbsp;剩余:{{detailMsg.num}}件</p>
    </div>
  </div>
  <div class="fotter">
      <div id="icon">
        <img src="../assets/icon1.png">
      </div>
      <div id="shoppingCar">
        <mt-button type="danger" @click="addCar">加入购物车</mt-button>
      </div>
      <div id="pay">
        <mt-button type="danger" @click="buy">立即购买</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, MessageBox } from 'mint-ui'

export default {
  data () {
    return {
      detailMsg: {},
      size: [],
      selected: true,
      imgsrc: '',
      buyNum: 0,
      productMsg: {
        productId: '',
        size: '',
        num: ''
      },
      goodsDetail: {
        picArr: [],
        goodsMsg: {
          picSrc: require('../assets/1.jpg'),
          proName: 'vue+vuex+vue-router+mint-ui 开源demo（简单粗暴）欢迎学习与交流，最好点个赞',
          price: '666.66',
          oldPrice: '99999.99',
          num: 10000
        },
        size: '40-50'
      }
    }
  },
  mounted () {
    this.$store.commit('setProductMsg', this.productMsg)
    let id = this.$route.params.id
    this.productMsg.productId = id
    this.detailMsg = this.goodsDetail.goodsMsg
    var arr = this.goodsDetail.size.split('-')
    var mix = arr[0] - 0
    var max = arr[1] - 0
    for (var i = 0; i <= max - mix; i++) {
      this.size.push(mix + i)
    }
  },
  watch: {
    selected (newval, oldval) {
      this.productMsg.size = newval
    },
    productMsg: {
      handler (newobj) {
        this.$store.commit('setProductMsg', newobj)
        let data = this.goodsDetail.goodsMsg
        data.buynum = newobj.num
        data.size = newobj.size
        data.id = newobj.productId
        this.$store.commit('setCartData', data)
      },
      deep: true
    }
  },
  methods: {
    addnum () {
      if (this.buyNum < this.detailMsg.num) {
        this.buyNum++
        this.productMsg.num = this.buyNum
      }
    },
    delnum () {
      if (this.buyNum > 1) {
        this.buyNum--
        this.productMsg.num = this.buyNum
      }
    },
    addCar () {
      var product = this.$store.getters.getProductMsg
      for (let key in product) {
        if (!product[key]) {
          Toast({
            message: '请选择正确的购物',
            position: 'middle',
            duration: 2000
          })
          return false
        }
      }
      let data = this.$store.getters.getCartData
      let arr = JSON.parse(localStorage.getItem('cartData')) || []
      arr.push(data)
      localStorage.setItem('cartData', JSON.stringify(arr))
      MessageBox.confirm('是否前往购物车?', '添加成功').then(action => {
        if (action === 'confirm') {
          this.$router.push({path: '/shoppingCar'})
        }
      })
    },
    buy () {
      Toast({
        message: '未有该功能',
        position: 'middle',
        duration: 2000
      })
    }
  }
}
</script>

<style lang='less' scoped>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
.mint-header {
  padding: 0 30 / 16rem;
  a {
    color: white;
  }
}
.detail {
  font-size: 16 / 16rem;
  .img {
    display: block;
    width: 100%;
  }
  .title {
    font-size: 18 / 16rem;
    font-weight: 600;
    padding: 10 / 16rem;
  }
  .price {
    font-size: 18 / 16rem;
    padding: 15 / 16rem 5 / 16rem;
    border-top: 1 / 16rem solid #ccc;
    border-bottom: 1 / 16rem solid #ccc;
    span {
      color: red;
      font-size: 22 / 16rem;
    }
    del {
      font-size: 14 / 16rem;
      color: #999;
      padding-left: 10 / 16rem;
    }
  }
  .size {
    padding: 10 / 16rem 5 / 16rem;
    .mint-navbar {
      display: inline;
      .size-count {
        display: inline-block;
        width: 35 / 16rem;
        font-size: 20 / 16rem;
        border: 2 / 16rem solid #ccc;
        margin: 2 / 16rem;
        padding: 9 / 16rem 0;
      }
      a {
        color: #000;

      }
      .is-selected {
        color:#000 ;
        background-color: orange;
        border: 2 / 16rem solid orange;
      }
    }
  }
}
.num{
  p{
    padding: 5 / 16rem 0;
    span{
      border: 1 / 16rem solid #333;
      display: inline-block;
      width: 30 / 16rem;
      height: 30 / 16rem;
      text-align: center;
      line-height: 30 / 16rem;
    }
    span:nth-child(2){
      border-left: none;
      border-right: none;
    }
  }
}
.fotter {
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 1;
  background-color: #eee;
  display: flex;
  padding-top: 10 / 16rem;
  padding-bottom: 10 / 16rem;
  #icon {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 24 / 16rem;
    }
  }
  #shoppingCar {
    width: 50%;
    button {
      width: 90%;
      margin: 0 auto;
    }
  }
  #pay {
    width: 30%;
    button {
      width: 90%;
      margin: 0 auto;
      background-color: #ff7300;
    }
  }
}
p {
  color: #000;
}
.mint-navbar {
  background-color: #efeff4;
}
</style>
